<template>
	<view class="container">
		<!--筛选.开始-->
		<view class="screen-bar">
			<view class="screen-box">
				<text :class="{active: type===0}" class="item-box" @click="tabClick(0)">全部</text>
				<text :class="{active: type===1}" class="item-box" @click="tabClick(1)">有图</text>
				<text :class="{active: type===2}" class="item-box" @click="tabClick(2)">好评</text>
				<text :class="{active: type===3}" class="item-box" @click="tabClick(3)">中/差评</text>
			</view>
		</view>
		<!--筛选.结束-->
		
		<!--评价.开始-->
		<view class="group-box">
			<view class="comment-list">
				<view v-if="listData.length===0" class="nodata">
					商品暂无评价
				</view>
				<!--循环.开始-->
				<view v-for="(item,index) in listData" :key="index" class="list-box">
					<view class="head-box">
						<view class="left">
							<view class="img-box">
								<image mode="widthFix" :src="$api.loadFile(item.member.avatar)"></image>
							</view>
							<view class="meta">
								<text>{{item.userName}}</text>
								<text class="time">{{item.addTime}}</text>
							</view>
						</view>
						<view class="star">
							<text v-for="i in 5" :key="i" class="iconfont" :class="i<=item.serviceScore?'icon-star-full':'icon-star'"></text>
						</view>
					</view>
					<view class="content">
						<text>
							{{item.content}}
						</text>
					</view>
					<view class="album-box">
						<view v-for="(pic,pindex) in item.evaluateAlbums" :key="pindex" class="img-box">
							<image @click="viewImage(item.evaluateAlbums,pindex)" mode="widthFix" :src="$api.loadFile(pic.thumbPath)"></image>
						</view>
					</view>
					<view class="remark">
						<text>{{item.orderGoods.specText}}</text>
					</view>
				</view>
				<!--循环.结束-->
			</view>
		</view>
		<!--评价.结束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0, //筛选类别0全部1有图2好评3中差评
				goodsId: 0, //商品ID
				loadingType: "more", //加载状态
				totalCount: 0, //总数量
				totalPages: 0, //总页数
				pageSize: 10, //每页显示条数
				pageIndex: 1, //当前页码
				listData: [], //数据列表
			}
		},
		methods: {
			//初始化数据,带下滑刷新和上滑加载
			async loadData(type='add', loading){
				let _this = this;
				//上滑加载更多
				if(type === 'add'){
					if(_this.loadingType === 'nomore'){
						return;
					}
					_this.loadingType = 'loading';
				}
				//下滑刷新
				else{
					_this.pageIndex=1;
					_this.listData=[];
					_this.loadingType="more";
				}
				//加载评价列表
				let sendUrl = `/client/goods/evaluate/${_this.goodsId}?pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`;
				//有图
				if(_this.type===1){
					sendUrl += `&image=1`;
				}
				//好评
				else if(_this.type===2){
					sendUrl += `&score=3`;
				}
				//中差评
				else if(_this.type===3){
					sendUrl += `&score=2`;
				}
				//发送请求
				await _this.$api.request({
					url: sendUrl,
					loading: true
				}).then(res=>{
					let pageInfo = JSON.parse(res.header["x-pagination"]);
					_this.totalCount = pageInfo.totalCount;
					_this.totalPages = pageInfo.totalPages;
					let listData = res.data;
					_this.listData = _this.listData.concat(listData);
				}).catch((err)=>{
					_this.loadingType="nomore";
					uni.stopPullDownRefresh();
				});
				
				//判断是否还有下一页
				if(_this.pageIndex >= _this.totalPages){
					_this.loadingType="nomore";
				}else{
					_this.pageIndex++;
					_this.loadingType="more";
				}
				//下滑隐藏动画及上滑事件
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			//点击筛选按钮
			tabClick(type){
				this.type = type;
				//页面回到顶部
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				//重新加载
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//查看图片
			viewImage(albumList, index) {
				console.log(index)
				let _this = this;
				let urls = albumList.map(item=>{
					return _this.$api.loadFile(item.originalPath);
				});
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
		},
		//页面初始化
		onLoad(options){
			if(options.id){
				this.goodsId = parseInt(options.id);
				this.loadData('add');
			}
		},
		//下滑刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//上滑加载更多
		onReachBottom(){
			this.loadData('add');
		}
	}
</script>

<style lang="scss">
	.screen-bar{
		height: 40px;
		.screen-box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: fixed;
			left: 0;
			right: 0;
			padding: 0 24rpx;
			height: 40px;
			background: #fff;
			box-shadow: 0 0 2px rgba($color: #000, $alpha: 0.05);
			background: linear-gradient(to bottom, #fff , #fafafa);
			z-index: 1;
			.item-box{
				box-sizing: border-box;
				margin-right: 20rpx;
				padding: 0 15px;
				color: #333;
				font-size: 14px;
				line-height: 24px;
				border-radius: 24px;
				border: 1px solid #f5f5f5;
				background: #f5f5f5;
				overflow: hidden;
				&.active{
					color: #f63434;
					border-color: #f90;
					background: #fff;
				}
			}
		}
	}
</style>
